<template>
  <div id="gupiao">
    <div id="gupiao1">
      <div v-if="showd" id="day">
        <highcharts :options="chartOptions"></highcharts>
        <button class="ebtn" @click="showd = !showd">minute</button>

      </div>
      <div v-if="!showd" id="minute">
        <div id="minutediv">
          <highcharts :options="chartOptions_minute"></highcharts>
          <button class="ebtn" @click="showd = !showd">day</button>
        </div>
        <div id="tablediv">
          <el-table
              :data="tableData3"
              height="370"
              style="width: 100%"
              :row-class-name="tableRowClassName"
              :show-header="true"
          >
            <el-table-column
                prop="date"
                label="#"
                width="90">
            </el-table-column>
            <el-table-column
                prop="name"
                label="detail"
                width="90">
            </el-table-column>
            <el-table-column
                prop="percent"
                label="percent"
                width="90">
            </el-table-column>
            <el-table-column
                prop="address"
                label=" ">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {Chart} from 'highcharts-vue'
import {get_code, get_min, get_one_day} from '@/api/api'
import moment from "moment";

export default {
  props: {
    Gname: {
      type: String,
      required: true,
    },
  },
  name: "gupiao",
  data() {
    var a = {
      南天信息: 22.8,
      晶方科技: 25,
      博彦科技: 16.65,
      全志科技: 35.12,
    }
    return {

      showd: false,
      code: '',
      timer1: "",
      timer2: "",
      chartOptions: {
        credits: {
          enabled: false
        },
        chart: {
          zoomType: 'xy',
          backgroundColor: '#ffffff',
        },
        title: {
          text: this.Gname
        },
        // subtitle: {
        //   text: '数据来源: xueqiu'
        // },
        xAxis: [{
          categories: [],
          crosshair: true
        }],
        yAxis: [{ // Primary yAxis
          labels: {
            format: '{value}%',
            style: {
              color: '#be2440'
            }
          },
          title: {
            text: '幅度',
            style: {
              color: '#0cb8d5'
            }
          },
          // ticks: {
          //   beginAtZero:true
          // }
          // min : function(value){
          //   //最小值设置，其中-value.max * 1.05 乘以1.05 ，主要是使图的边界小于最小的值，给边界留空间
          //   return ( Math.abs(value.min) < value.max ? -value.max * 1.05 : value.min *  1.05).toFixed(2);
          // },
          // max : function(value){
          //   //最大值设置，其中-value.min * 1.05 乘以1.05 ，主要是使图的边界大于最大于值，给边界留空间
          //   return ( Math.abs(value.min) < value.max ? value.max * 1.05 : -value.min * 1.05).toFixed(2);
          // }
        }, { // Secondary yAxis
          title: {
            text: 'rmb',
            style: {
              color: '#196c2e'
            }
          },
          labels: {
            format: '{value}',
            style: {
              color: '#b11919'
            }
          },
          opposite: true,
          gridLineColor: '#173825',
        }],
        tooltip: {
          shared: true
        },
        // legend: {
        //   layout: 'vertical',
        //   align: 'left',
        //   x: 120,
        //   verticalAlign: 'top',
        //   y: 100,
        //   floating: true,
        //   backgroundColor: '#110d0d'
        // },
        series: [{
          showInLegend: false,
          name: '价格',
          type: 'line',
          dashStyle: 'shortdot',
          yAxis: 1,
          color: '#d7d6cc',
          // color: '#eed8f1',
          data: [],
          marker: {
            radius: 2,
            lineWidth: 1,
          },
          tooltip: {
            valueSuffix: ' rmb'
          },
        }, {
          showInLegend: false,
          name: '幅度',
          type: 'line',
          data: [],
          // color: '#d7d6cc',
          color: 'rgb(255,255,255,0)', // 方法二 设置透明色
          // visible: false, // 控制图线显示
          // marker: { # 折线图的点
          //   enabled: false,
          //   radius: 2,
          //   symbol: 'diamond',
          //   lineWidth: 1,
          //   lineColor: 'rgb(255,255,255,0)'
          // },
          tooltip: {
            valueSuffix: '°%'
          }
        }]
      },
      chartOptions_minute: {
        credits: {
          enabled: false
        },
        chart: {
          zoomType: 'xy',
          backgroundColor: '#ffffff',
        },
        title: {
          text: 'hzmc_' + this.Gname + (a[this.Gname] || ''),
          useHTML: true,
          style: {
            color: '#9d78a8'
          }

        },
        // subtitle: {
        //   text: '数据来源: xueqiu'
        // },
        xAxis: [{
          categories: [],
          crosshair: true
        }],
        yAxis: [{ // Primary yAxis
          // labels: { //坐标单位
          //   format: '{value}°C',
          //   // position: 'top',
          //   style: {
          //     color: '#2525af'
          //   }
          // },
          title: {
            text: '%',
            style: {
              color: '#98b934'
            }
          }
        }, { // Secondary yAxis
          title: {
            text: 'rmb',
            style: {
              color: '#98b934'
            }
          },
          // labels: {
          //   format: '{value} mm',
          //   // position: 'top',
          //   style: {
          //     color: '#3fb119'
          //   }
          // },
          opposite: true
        }],
        tooltip: {
          shared: true
        },
        // legend: {
        //   layout: 'vertical',
        //   align: 'left',
        //   x: 120,
        //   verticalAlign: 'top',
        //   y: 100,
        //   floating: true,
        //   backgroundColor: '#0a0a0a'
        // },
        series: [{
          showInLegend: false,
          name: '价格',
          type: 'line',
          dashStyle: 'shortdot',
          yAxis: 1,
          color: '#d7d6cc',
          // color: '#eed8f1',
          data: [],
          marker: {
            radius: 2,
            lineWidth: 1,
          },
          tooltip: {
            valueSuffix: ' rmb'
          },
        }, {
          showInLegend: false,
          name: '幅度',
          type: 'line',
          data: [],
          // color: '#d7d6cc',
          color: 'rgb(255,255,255,0)', // 方法二 设置透明色
          // visible: false, // 控制图线显示
          // marker: { # 折线图的点
          //   enabled: false,
          //   radius: 2,
          //   symbol: 'diamond',
          //   lineWidth: 1,
          //   lineColor: 'rgb(255,255,255,0)'
          // },
          tooltip: {
            valueSuffix: '°%'
          }
        }]
      },
      tableData3: [],
    }
  },
  components: {
    highcharts: Chart
  },
  methods: {
    async initminuteAPi() {
      // console.log('initminuteAPi')
      if (this.code === '') {
        const {data: datacode} = await get_code(this.Gname)
        if (datacode.data.length === 0) {
          return
        }
        this.code = datacode.data[0].code
      }
      const {data: data} = await get_min(this.code)
      let arr = data.data.items
      this.chartOptions_minute.series[0].data = []
      this.chartOptions_minute.series[1].data = []
      this.chartOptions_minute.xAxis[0].categories = []
      this.tableData3 = []
      arr.forEach((item) => {
        let times = this.chartOptions_minute.xAxis[0].categories
        if (times.indexOf(item.timestamp) === -1) {
          this.chartOptions_minute.series[0].data.push(item.current)
          this.chartOptions_minute.series[1].data.push(item.percent)
          this.chartOptions_minute.xAxis[0].categories.push(item.percent)
          let timestamp = item.timestamp
          let time = moment(timestamp).format('hh:mm')
          this.tableData3.unshift({
            date: time,
            side: item.side,
            percent: item.percent,
            name: item.current,
            address: item.trade_volume / 100
          })
        }
      })
      const nowTtime = new Date()
      let sec = nowTtime.getSeconds()
      let hour = new Date().getHours()
      let mint = new Date().getMinutes()
      // 9.30 19:00
      if ((hour === 9 && mint > 30) || (hour > 9 && hour < 15) || (hour === 15 && mint < 30)) {
        console.log(hour, mint, sec, 'time in')
      } else {
        console.log(hour, mint, sec, 'time out')
        this.clarval()
      }
    },
    async initdayAPIAPi() {
      // console.log('initdayAPIAPi')
      if (this.code === '') {
        const {data: datacode} = await get_code(this.Gname)
        if (datacode.data.length === 0) {
          return
        }
        this.code = datacode.data[0].code
      }
      const {data: data} = await get_one_day(this.code)
      let arr = data.data.items
      // console.log(data)
      this.chartOptions.series[0].data = []
      this.chartOptions.series[1].data = []
      this.chartOptions.xAxis[0].categories = []
      arr.forEach((item) => {
        let times = this.chartOptions.xAxis[0].categories
        if (times.indexOf(item.timestamp) === -1) {
          this.chartOptions.series[0].data.push(item.current)
          this.chartOptions.series[1].data.push(item.percent)
          let timestamp = item.timestamp
          let time = moment(timestamp).format('hh:mm')
          this.chartOptions.xAxis[0].categories.push(time)
        }
      })
    },
    clarval() {
      this.timer1 && clearInterval(this.timer1)
      this.timer2 && clearInterval(this.timer2)
    },
    tableRowClassName({row}) {
      // console.log(row.side)
      let  names = []
      if (row.side === 1) {
        names.push('warning-row')
      } else if (row.side === -1) {
        names.push('success-row')
      }
      if (row.percent >= 0) {
        names.push('up-row')
      } else if (row.percent < 0) {
        names.push('down-row')
      }
      return names.join(" ");
    }
  },
  created() {
    this.initdayAPIAPi()
    this.initminuteAPi()
    this.clarval()
    this.timer1 = setInterval(this.initminuteAPi, 1000)
    this.timer2 = setInterval(this.initdayAPIAPi, 60000)
  },

  beforeDestroy() {
    this.clarval()
  }
}
</script>


<style lang="less" scoped>
#gupiao {
  //background-color:Blue;
  width: 100%;
  //height:180px;
  margin: 0 auto;
  border: 0;

}

.ebtn {
  //display: inline-flex;
  //float: left;
  position: absolute;
  top: 2%;
  left: 80%;
  margin-bottom: -100px;
  background: #ffffff;
  color: rgb(51, 51, 51);
  border: none;
  cursor: pointer;
}

#gupiao1 {
  //background-color:Blue;
  width: 100%;
  margin: 0;
  padding: 0

}

#day {
  width: 100%;
  //display: inline-block;
  position: relative;
}

#minute {
  width: 100%;
  //display: inline-block;
  position: relative;
}

#minutediv {
  width: 82%;
  display: inline-block;
  //position: relative;
}

#tablediv {
  width: 18%;
  height: 100%;
  display: inline-block;
  //position: relative;
  /deep/ .el-table .warning-row td:last-child {
    color: #da1886;
  }

  /deep/ .el-table .success-row td:last-child {
    color: #5bc51f;
  }
  /deep/ .el-table .up-row td:nth-child(2) {
    color: #da1886;
  }

  /deep/ .el-table .down-row td:nth-child(2) {
    color: #5bc51f;
  }
  .el-table {
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      width: 10px; /*滚动条宽度*/
      height: 10px; /*滚动条高度*/
    }
    /*定义滚动条轨道 内阴影+圆角*/
    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #d6d8dc inset; /*滚动条的背景区域的内阴影*/
      border-radius: 10px; /*滚动条的背景区域的圆角*/
      background-color: #dee1e8; /*滚动条的背景颜色*/
    }
    /*定义滑块 内阴影+圆角*/
    /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #00a0e9 inset; /*滚动条的内阴影*/
      border-radius: 10px; /*滚动条的圆角*/
      background-color: #cf98de; /*滚动条的背景颜色*/
    }
  }



}

</style>